@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/style.css')}}">
    <link rel="stylesheet" href="{{url('css/common.css')}}">
    <link rel="stylesheet" href="{{url('css/public.css')}}">
    <link rel="stylesheet" href="{{url('css/demos.css')}}">
    <style>
        body{
            background-color: #f3f3f3;
        }
        .toolbar .title {
            line-height: 2.4rem;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
@endsection

@section('html-body')
    <div>
        <div class="demos-content-padded bg-color_white">
            <img src="{{url('images/aaaa.png')}}" alt="" class="width_100">
        </div>
        <div class="weui-cells__title">请填写基本资料</div>
        <!-- 表单 -->
        <form action="" id="form-data">
            <div class="weui-cells weui-cells_checkbox">
                <div class="weui-cell right_15--before">
                    <div class="weui-cell__hd">
                        <div class="weui-label input-label">性别</div>
                    </div>
                    <div class="weui-cell__bd">
                        <label for="man">
                            <input type="radio" class="weui-check" name="gender" id="man" checked="checked" value="1">
                            <i class="weui-icon-checked"></i>
                        </label>男
                        <label for="woman">
                            <input type="radio" class="weui-check" name="gender" id="woman" value="2">
                            <i class="weui-icon-checked"></i>
                        </label>女
                    </div>
                </div>

                <div class="weui-cell right_15--before">
                    <div class="weui-cell__hd">
                        <div class="weui-label input-label">产业</div>
                    </div>
                    <div class="weui-cell__bd">
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <input type="text" name="indus_parent" id="indusParent" class="weui-input" placeholder="请选择产业" value="">
                            </div>
                            <div class="weui-flex__item">
                                <input type="text" name="indus_child" id="indusChild" class="weui-input" placeholder="请选择产业详情" value="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="weui-cell right_15--before">
                    <div class="weui-cell__hd">
                        <div class="weui-label input-label">职业</div>
                    </div>
                    <div class="weui-cell__bd">
                        <div class="weui-flex">
                            <div class="weui-flex__item">
                                <input type="text" name="func_parent" id="occupicker" class="weui-input" placeholder="请选择行业" value="">
                            </div>
                            <div class="weui-flex__item">
                                <input type="text" name="func" id="occuChildPicker" class="weui-input" placeholder="请选择职业" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="weui-cell right_15--before">
                    <div class="weui-cell__hd">
                        <div class="weui-label input-label">出生年份</div>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" name="year" class="weui-input input-yearPicker yearPicker" id="year" readonly placeholder="请选择年份" value="">年
                    </div>
                </div>
                <a class="weui-cell weui-cell_access right_15--before" href="javascript:;">
                    <div class="weui-cell__hd">
                        <div class="weui-label input-label">城市</div>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" name="city" class="weui-input citypicker" id="city-picker" readonly placeholder="请选择所在城市" value="">
                    </div>
                    <div class="weui-cell__ft"></div>
                </a>
            </div>
        </form>
        {{--<div class="weui-agree">--}}
            {{--<span class="weui-agree__text">--}}
                {{--点击“成为会员”意味着您已经阅读、知晓并同意--}}
                {{--<a href="{{route('Home.Page.page',['tag'=>'member_agreement'])}}">《会员服务协议》</a>--}}
            {{--</span>--}}
        {{--</div>--}}
        <!-- 按钮 -->
        <div class="form-btn_box" style="margin-top: 22px;">
            <a href="javascript:void(0);" id="btn_pay" style="background-color: #1cac1b" class="weui-btn bg-color__theme font-color_white bg-color__theme--active">
                <img src="{{url('images/member.png')}}" alt="" class="img-size-normal position-relative" style="top:0.2rem;">提交信息
            </a>
        </div>
        {{--<div class="weui-cells__tips font-color__stress">*点击“成为会员”进去支付页面，支付金额为固定金额</div>--}}
    </div>
    <script>
        $(function () {
            $("#city-picker").cityPicker({
                title: "请选择所在城市"
            });
            var years = [];
            function setYears() {
                for (var i = 2018; i >= 1970; i--) {
                    years.push(i);
                }
            }
            setYears();

            $("#year").picker({
                title: '请选择出生年份',
                cols: [
                    {
                        textAlign: 'center',
                        values: years
                    }
                ]
            });

            var pros = [];
            var childPros = [];
            getPro();
            function getPro() {
                $.ajax({
                    url:"{{route('Api.User.getPro')}}",
                    type:"get",
                    dataType:"json",
                    success:function(obj){
                        if(obj.level == 'success'){
                            var data = obj.data;
                            for(var i=0;i<data.length;i++){
                                pros.push(data[i].pro_name);
                            }
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            }

            $("#occupicker").picker({
                title: '请选择行业',
                cols: [
                    {
                        textAlign: 'center',
                        values: pros
                    }
                ],
                onClose: function () {
                    childPros.length=0;
                    $("#occuChildPicker").val('');
                    var proName = this.cols[0].value;
                    getChildPro(proName);
                },
            });

            function getChildPro(proName) {
                $.ajax({
                    url:"{{route('Api.User.getChildPro')}}?pro_name="+proName,
                    type:"get",
                    dataType:"json",
                    success:function(obj){
                        if(obj.level == 'success'){
                            var data = obj.data;
                            for(var i=0;i<data.length;i++){
                                childPros.push(data[i].pro_name);
                            }
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            }

            $("#occuChildPicker").picker({
                title: '请选择职业',
                cols: [
                    {
                        textAlign: 'center',
                        values: childPros
                    }
                ],
            });

            //----------产业------------
            var indus = [];
            var childIndus = [];
            getIndus();
            function getIndus() {
                $.ajax({
                    url:"{{route('Api.User.getIndus')}}",
                    type:"get",
                    dataType:"json",
                    success:function(obj){
                        if(obj.level == 'success'){
                            var data = obj.data;
                            for(var i=0;i<data.length;i++){
                                indus.push(data[i].name);
                            }
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            }

            $("#indusParent").picker({
                title: '请选择产业分类',
                cols: [
                    {
                        textAlign: 'center',
                        values: indus
                    }
                ],
                onClose: function () {
                    childIndus.length=0;
                    $("#indusChild").val('');
                    var proName = this.cols[0].value;
                    getChildIndus(proName);
                },
            });

            function getChildIndus(proName) {
                $.ajax({
                    url:"{{route('Api.User.getChildIndus')}}?name="+proName,
                    type:"get",
                    dataType:"json",
                    success:function(obj){
                        if(obj.level == 'success'){
                            var data = obj.data;
                            for(var i=0;i<data.length;i++){
                                childIndus.push(data[i].name);
                            }
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            }

            $("#indusChild").picker({
                title: '请选择产业内容',
                cols: [
                    {
                        textAlign: 'center',
                        values: childIndus
                    }
                ],
            });

            $('#btn_pay').click(function () {
                var sex = $("input[name='gender']:checked").val();
                var trade = $("#occupicker").val();
                var indus = $("#indusParent").val();
                var job_name = $("#occuChildPicker").val();
                var indusChild = $("#indusChild").val();
                var birthday = $("#year").val();
                var area_info = $("#city-picker").val();

                $.showLoading();
                $.ajax({
                    type:"post",
                    url:'{{route('Api.Plan.joinPlan')}}',
                    dataType:"json",
                    data:{
                        'sex'      :sex,
                        'trade'    :trade,
                        'job_name' :job_name,
                        'birthday' :birthday,
                        'area_info':area_info,
                        'industry' :indus,
                        'industry_two' :indusChild
                    },
                    success:function(obj){
                        if(obj.level == "success"){
                            $.toast("提交成功",function () {
                                window.location.href="{{route('Home.Page.index')}}";
                            });
                        }else {
                            $.hideLoading();
                            $.toast(obj.message, "forbidden");
                        }
                    },
                    error:function(obj){
                        $.hideLoading();
                       console.log(obj);
                    }
                });
            });
        });
    </script>
@endsection